{% extends "base_tabler.html" %} {% block title %}数据管理{% endblock %} {% block custom_css %}
<style>
  .table-responsive {
    overflow-x: auto;
    max-width: 100%;
  }
  .table {
    min-width: 2200px; /* 足够宽以容纳所有列 */
  }
  .table th,
  .table td {
    white-space: nowrap;
    padding: 0.5rem;
  }
</style>
{% endblock %} {% block content %}
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">数据管理</h2>
        <div class="text-muted mt-1">共 {{ total_records }} 条数据记录</div>
      </div>
      <div class="col-auto ms-auto d-print-none">
        {% comment %}
        <div class="btn-list">
          <a href="{% url 'data_upload' %}" class="btn btn-primary d-none d-sm-inline-block">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="icon"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M14 3v4a1 1 0 0 0 1 1h4" />
              <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
              <path d="M12 11v6" />
              <path d="M9 14h6" />
            </svg>
            上传数据
          </a>
        </div>
        {% endcomment %}
      </div>
    </div>
  </div>
</div>

<div class="page-body">
  <div class="container-xl">
    <div class="card">
      <div class="card-body">
        <div class="d-flex">
          <div class="ms-auto">
            <form action="{% url 'data_manage' %}" method="get" class="mb-3">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="搜索数据..." name="q" value="{{ search_query }}" />
                <button class="btn btn-outline-secondary" type="submit">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-search"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
                    <path d="M21 21l-6 -6"></path>
                  </svg>
                </button>
              </div>
            </form>
          </div>
        </div>

        <div class="table-responsive">
          <table class="table table-vcenter card-table">
            <thead>
              <tr>
                <th class="column-basic">ID</th>
                <th class="column-basic">性别</th>
                <th class="column-basic">年龄</th>
                <th class="column-basic">朋友数量</th>
                <th class="column-basic">毕业年份</th>
                <th class="column-sports">篮球</th>
                <th class="column-sports">足球</th>
                <th class="column-sports">英式足球</th>
                <th class="column-sports">垒球</th>
                <th class="column-sports">排球</th>
                <th class="column-sports">游泳</th>
                <th class="column-sports">啦啦队</th>
                <th class="column-fashion">发型关注</th>
                <th class="column-fashion">着装关注</th>
                <th class="column-fashion">金发偏好</th>
                <th class="column-fashion">逛商场</th>
                <th class="column-fashion">购物兴趣</th>
                <th class="column-fashion">服装关注</th>
                <th class="column-fashion">Hollister</th>
                <th class="column-fashion">Abercrombie</th>
                <th class="column-personality">可爱特质</th>
                <th class="column-personality">性感特质</th>
                <th class="column-personality">魅力特质</th>
                <th class="column-personality">亲密关系</th>
                <th class="column-personality">饮酒频率</th>
                <th class="column-personality">药物使用</th>
                <th class="column-personality">死亡话题</th>
                <th class="column-personality">生死观念</th>
                <th class="column-basic">创建时间</th>
                <th class="column-basic">操作</th>
              </tr>
            </thead>
            <tbody>
              {% for item in page_obj %}
              <tr>
                <td class="column-basic">{{ item.id }}</td>
                <td class="column-basic">{{ item.get_gender_display }}</td>
                <td class="column-basic">{{ item.age }}</td>
                <td class="column-basic">{{ item.friends }}</td>
                <td class="column-basic">{{ item.gradyear }}</td>
                <td class="column-sports">{{ item.basketball }}</td>
                <td class="column-sports">{{ item.football }}</td>
                <td class="column-sports">{{ item.soccer }}</td>
                <td class="column-sports">{{ item.softball }}</td>
                <td class="column-sports">{{ item.volleyball }}</td>
                <td class="column-sports">{{ item.swimming }}</td>
                <td class="column-sports">{{ item.cheerleading }}</td>
                <td class="column-fashion">{{ item.hair }}</td>
                <td class="column-fashion">{{ item.dress }}</td>
                <td class="column-fashion">{{ item.blonde }}</td>
                <td class="column-fashion">{{ item.mall }}</td>
                <td class="column-fashion">{{ item.shopping }}</td>
                <td class="column-fashion">{{ item.clothes }}</td>
                <td class="column-fashion">{{ item.hollister }}</td>
                <td class="column-fashion">{{ item.abercrombie }}</td>
                <td class="column-personality">{{ item.cute }}</td>
                <td class="column-personality">{{ item.sexy }}</td>
                <td class="column-personality">{{ item.hot }}</td>
                <td class="column-personality">{{ item.kissed }}</td>
                <td class="column-personality">{{ item.drunk }}</td>
                <td class="column-personality">{{ item.drugs }}</td>
                <td class="column-personality">{{ item.death }}</td>
                <td class="column-personality">{{ item.die }}</td>
                <td class="column-basic">{{ item.created_at|date:"Y-m-d H:i" }}</td>
                <td class="column-basic">
                  <div class="btn-list flex-nowrap">
                    <button
                      type="button"
                      class="btn btn-sm btn-primary"
                      data-bs-toggle="modal"
                      data-bs-target="#modal-view-data"
                      data-record-id="{{ item.id }}"
                    >
                      详情
                    </button>
                  </div>
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="28" class="text-center">暂无数据记录</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        {% if page_obj.has_other_pages %}
        <div class="card-footer d-flex align-items-center">
          <ul class="pagination m-0 ms-auto">
            {% if page_obj.has_previous %}
            <li class="page-item">
              <a
                class="page-link"
                href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M15 6l-6 6l6 6" />
                </svg>
                上一页
              </a>
            </li>
            {% endif %} {% for i in page_obj.paginator.page_range %} {% if page_obj.number == i %}
            <li class="page-item active"><a class="page-link" href="#">{{ i }}</a></li>
            {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
            <li class="page-item">
              <a class="page-link" href="?page={{ i }}{% if search_query %}&q={{ search_query }}{% endif %}">{{ i }}</a>
            </li>
            {% endif %} {% endfor %} {% if page_obj.has_next %}
            <li class="page-item">
              <a
                class="page-link"
                href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}"
              >
                下一页
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M9 6l6 6l-6 6" />
                </svg>
              </a>
            </li>
            {% endif %}
          </ul>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- 数据详情模态框 -->
<div class="modal modal-blur fade" id="modal-view-data" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">数据详情</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="record-details" class="row">
          <div class="col-md-6 mb-3">
            <h4>基本信息</h4>
            <div class="table-responsive">
              <table class="table table-sm">
                <tbody id="basic-info"></tbody>
              </table>
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <h4>运动兴趣</h4>
            <div class="table-responsive">
              <table class="table table-sm">
                <tbody id="sports-info"></tbody>
              </table>
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <h4>时尚与外表</h4>
            <div class="table-responsive">
              <table class="table table-sm">
                <tbody id="fashion-info"></tbody>
              </table>
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <h4>个性与风险行为</h4>
            <div class="table-responsive">
              <table class="table table-sm">
                <tbody id="personality-risk-info"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    // 数据详情模态框处理
    const viewDataModal = document.getElementById("modal-view-data")
    viewDataModal.addEventListener("show.bs.modal", function (event) {
      const button = event.relatedTarget
      const recordId = button.getAttribute("data-record-id")

      // 清空之前的详情
      document.getElementById("basic-info").innerHTML = ""
      document.getElementById("sports-info").innerHTML = ""
      document.getElementById("fashion-info").innerHTML = ""
      document.getElementById("personality-risk-info").innerHTML = ""

      // 加载数据详情
      fetch(`/api/data/${recordId}/`)
        .then((response) => response.json())
        .then((data) => {
          // 填充基本信息
          const basicInfoHtml = `
            <tr><th>ID</th><td>${data.id}</td></tr>
            <tr><th>性别</th><td>${data.gender_display}</td></tr>
            <tr><th>年龄</th><td>${data.age}</td></tr>
            <tr><th>朋友数量</th><td>${data.friends}</td></tr>
            <tr><th>毕业年份</th><td>${data.gradyear}</td></tr>
            <tr><th>创建时间</th><td>${data.created_at}</td></tr>
          `
          document.getElementById("basic-info").innerHTML = basicInfoHtml

          // 填充运动兴趣
          const sportsInfoHtml = `
            <tr><th>篮球</th><td>${data.basketball}/5</td></tr>
            <tr><th>足球</th><td>${data.football}/5</td></tr>
            <tr><th>英式足球</th><td>${data.soccer}/5</td></tr>
            <tr><th>垒球</th><td>${data.softball}/5</td></tr>
            <tr><th>排球</th><td>${data.volleyball}/5</td></tr>
            <tr><th>游泳</th><td>${data.swimming}/5</td></tr>
            <tr><th>啦啦队</th><td>${data.cheerleading}/5</td></tr>
          `
          document.getElementById("sports-info").innerHTML = sportsInfoHtml

          // 填充时尚信息
          const fashionInfoHtml = `
            <tr><th>发型关注度</th><td>${data.hair}/5</td></tr>
            <tr><th>着装关注度</th><td>${data.dress}/5</td></tr>
            <tr><th>金发偏好</th><td>${data.blonde}/5</td></tr>
            <tr><th>逛商场频率</th><td>${data.mall}/5</td></tr>
            <tr><th>购物兴趣</th><td>${data.shopping}/5</td></tr>
            <tr><th>服装关注度</th><td>${data.clothes}/5</td></tr>
            <tr><th>Hollister偏好</th><td>${data.hollister}/5</td></tr>
            <tr><th>Abercrombie偏好</th><td>${data.abercrombie}/5</td></tr>
          `
          document.getElementById("fashion-info").innerHTML = fashionInfoHtml

          // 填充个性与风险行为
          const personalityRiskHtml = `
            <tr><th>可爱特质</th><td>${data.cute}/5</td></tr>
            <tr><th>性感特质</th><td>${data.sexy}/5</td></tr>
            <tr><th>魅力特质</th><td>${data.hot}/5</td></tr>
            <tr><th>亲密关系经验</th><td>${data.kissed}/5</td></tr>
            <tr><th>饮酒频率</th><td>${data.drunk}/5</td></tr>
            <tr><th>药物使用频率</th><td>${data.drugs}/5</td></tr>
            <tr><th>死亡话题关注度</th><td>${data.death}/5</td></tr>
            <tr><th>生死观念强度</th><td>${data.die}/5</td></tr>
          `
          document.getElementById("personality-risk-info").innerHTML = personalityRiskHtml
        })
        .catch((error) => {
          console.error("获取数据失败:", error)
          document.getElementById(
            "record-details",
          ).innerHTML = `<div class="col-12 text-center text-danger">获取数据详情失败</div>`
        })
    })

    // 列显示/隐藏功能
    const columnButtons = document.querySelectorAll(".column-toggle button")
    columnButtons.forEach((button) => {
      button.addEventListener("click", function () {
        const columnType = this.getAttribute("data-column")

        // 移除所有按钮的活动状态
        columnButtons.forEach((btn) => btn.classList.remove("active"))
        // 添加当前按钮的活动状态
        this.classList.add("active")

        // 显示/隐藏列
        const allColumns = document.querySelectorAll(
          ".column-basic, .column-sports, .column-fashion, .column-personality",
        )

        if (columnType === "all") {
          // 显示所有列
          allColumns.forEach((col) => (col.style.display = ""))
        } else if (columnType === "none") {
          // 隐藏所有列，只保留ID和操作列
          allColumns.forEach((col) => {
            if (col.classList.contains("column-basic")) {
              col.style.display = ""
            } else {
              col.style.display = "none"
            }
          })
        } else {
          // 显示特定类型的列
          allColumns.forEach((col) => {
            if (col.classList.contains("column-basic") || col.classList.contains(`column-${columnType}`)) {
              col.style.display = ""
            } else {
              col.style.display = "none"
            }
          })
        }
      })
    })

    // 默认显示基本信息
    document.querySelector('.column-toggle button[data-column="basic"]').click()
  })
</script>
{% endblock %}
